<script setup>
	import router from "@/router/index.js";
	import {
		useUserStore
	} from "@/stores/userStore.js";

	const userStore = useUserStore()

	const defact = ref('1')
	const menuActived = ref('1')
	const headTitle = ref('欢迎来到手机易管理系统')
	const goBackFlag = ref(false)
	let timer = ref(null)
	let nowUser = ref({
		avatar: '',
		nickname: ''
	})
	const userInfo = ref({})
	const menuList = ref([{
			id: '1',
			name: '投诉管理',
			path: 'report',
			icon: 'icon-iconfood'
		},
		{
			id: '2',
			name: '分类管理',
			path: 'category',
			icon: 'icon-iconfood'
		},
		{
			id: '3',
			name: '用户管理',
			path: 'user',
			icon: 'icon-iconfood'
		},
		{
			id: '4',
			name: '商品管理',
			path: 'goods',
			icon: 'icon-iconfood'
		},
		{
			id: '5',
			name: '订单管理',
			path: 'order',
			icon: 'icon-iconfood'
		},
		{
			id: '6',
			name: '广告管理',
			path: 'ad',
			icon: 'icon-iconfood'
		}
	])
	import {
		getCurrentInstance,
		onBeforeUnmount,
		onMounted,
		reactive,
		ref
	} from 'vue'
	import {
		getUserInfoApi,
		logoutApi,
		updateAdminById
	} from "@/apis/login.js";

	const upload = ref(null)

	const menuSwitch = (item) => {
		console.log("切换");
		console.log(item);
		console.log(headTitle.value);
		headTitle.value = item.name
	}

	function onCreated() {
		// 从pinia中获取用户信息
		const userInfo = userStore.getNowUserInfo()
		if (userInfo) {
			nowUser = userInfo
		}
		closeLoading()
	}

	onCreated()

	onBeforeUnmount(() => {
		timer = null
		clearTimeout(timer)
	})

	onMounted(() => {
		window.menuHandle = menuHandle
	})

	async function getUserData(params) {
		await getUserInfoApi(params).then((res) => {
			if (res.code === 1) {
				console.log(res)
				localStorage.setItem('nowUser', JSON.stringify(res.data))
				nowUser = res.data
			}
		})
	}

	function logout() {
		userStore.logout()
	}

	function goBack() {
		const menu = menuList.find(item => item.id === data.menuActived)
		menuHandle(menu, false)
	}

	function menuHandle(path) {
		router.push(path)

	}

	function closeLoading() {
		timer = null
		timer = setTimeout(() => {
			let loading;
			loading = false
		}, 1000)
	}
</script>

<template>

	<div class="app-wrapper openSidebar clearfix">
		<!-- sidebar -->
		<div class="sidebar-container">
			<div class="logo">
				<img alt="" src="@/assets/images/logo.png" style="width: 150px;" />
			</div>

			<el-scrollbar wrap-class="scrollbar-wrapper">
				<el-menu :collapse-transition="false" :default-active="defAct" :unique-opened="false"
					active-text-color="#f4f4f5" background-color="#343744" router text-color="#bfcbd9">
					<div v-for="item in menuList" :key="item.id">
						<el-menu-item :index="item.id" :route="`/${item.path}`" @click="menuSwitch(item)">
							<i :class="item.icon" class="iconfont"></i>
							<span slot="title">{{ item.name }}</span>
						</el-menu-item>
					</div>
				</el-menu>
			</el-scrollbar>
		</div>
		<div class="main-container">
			<!-- <navbar /> -->
			<div class="navbar">
				<div class="head-lable">
					<span v-if="goBackFlag" class="goBack" @click="goBack()">
						返回
					</span>
					<span>{{ headTitle }}</span>
				</div>
				<div class="right-menu">
					<el-link @click="logout">退出登录</el-link>
				</div>
			</div>
			<div v-loading="loading" class="app-main">
				<div v-show="loading" class="divTmp"></div>
				<router-view></router-view>
			</div>
		</div>
	</div>

</template>

<style scoped>
	@import "@/styles/index.css";
</style>